<template>
  <div class="table-box">
    <ProTable ref="proTableRef" row-key="id" title="智能箱" :columns="columns" :request-api="loadTable" highlight-current-row>
      <template #operation="scope">
        <ElButton type="primary" link :icon="View" @click="onEditClicked(scope.row)">配置所属指挥中心</ElButton>
      </template>
    </ProTable>
    <ElDrawer v-model="opened" title="设置所属智能箱" size="40%" destroy-on-close>
      <ElForm :model="form" ref="formRef" status-icon>
        <ElFormItem label="名称" :label-width="labelWidth" prop="name">
          <ElInput v-model="form.name" :disabled="true" />
        </ElFormItem>
        <ElFormItem label="ip" :label-width="labelWidth" prop="ip">
          <ElInput v-model="form.ip" :disabled="true" />
        </ElFormItem>
        <ElFormItem label="指挥中心" :label-width="labelWidth" prop="centerId">
          <ElSelect v-model="form.centerId" :clearable="true">
            <ElOption v-for="item in centerList" :key="item.id" :value="item.id" :label="item.name"></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="经度" :label-width="labelWidth" prop="longitude">
          <ElInput v-model="form.longitude" :disabled="true" />
        </ElFormItem>
        <ElFormItem label="纬度" :label-width="labelWidth" prop="latitude">
          <ElInput v-model="form.latitude" :disabled="true" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton type="primary" @click="onSaveClicked">保存</ElButton>
        <ElButton @click="onCancelClicked">关闭</ElButton>
      </template>
    </ElDrawer>
  </div>
</template>

<script setup lang="ts" name="ZLCommandCenterBox">
import { View } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive, unref } from 'vue'
import { CommandCenter } from '@api/tby/summarize/CommandCenter/interface'
import { pageCommandCenterBox, saveCommandCenterBox, listCommandCenter } from '@api/tby/summarize/CommandCenter'
import { ElMessage } from 'element-plus'

const proTableRef = ref<ProTableInstance>()
const centerList = ref<CommandCenter.Record[]>([])

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 表格列
const columns = reactive<ColumnProps<CommandCenter.BoxRecord>[]>([
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'name', label: '智能箱名称', search: { el: 'input', key: 'name', order: 1 }, align: 'center' },
  { prop: 'ip', label: '智能箱ip', align: 'center' },
  { prop: 'centerName', label: '所属指挥中心', align: 'center' },
  { prop: 'longitude', label: '经度', align: 'center' },
  { prop: 'latitude', label: '纬度', align: 'center' },
  { prop: 'operation', label: '操作', fixed: 'right', width: 180 }
])

const loadTable = (query: CommandCenter.Query) => {
  if (centerList.value.length === 0) {
    listCommandCenter({} as CommandCenter.Query).then(response => {
      centerList.value = response.data
    })
  }
  return pageCommandCenterBox(query)
}

// 修改
const onEditClicked = (row: any) => {
  let count = 0
  if (proTableRef.value) {
    for (let i = 0; i < proTableRef.value.tableData.length; i++) {
      if (proTableRef.value.tableData[i].id === row.id) {
        form.value = proTableRef.value.tableData[i]
        console.log('form.value', form.value)
        opened.value = true
        count = 1
        break
      }
    }
  }
  if (count === 0) {
    ElMessage.error('未找到数据')
  }
}

const opened = ref(false)
const form = ref<Partial<CommandCenter.BoxRecord>>({})
const labelWidth = 100

const onSaveClicked = async () => {
  const formData = { ...unref(form) }
  await saveCommandCenterBox(formData)
  opened.value = false
  form.value = {}
  proTableRef.value?.getTableList()
}

const onCancelClicked = () => {
  opened.value = false
  form.value = {}
}
</script>
